<template>
  <page-wrap
    :showTop="false"
    hide-tab
    back
    title="兑换激活码"
    :bg-color="uNavColor"
  >
    <view class="activation-code">
      <view class="exchange-card">
        <!-- <view class="title">请输入兑换码或扫描二维码兑换</view> -->
        <view class="title">请输入兑换码</view>
        <view class="code-input">
          <input
            type="text"
            v-model="activationCode"
            placeholder="在此处输入兑换码~"
            style="width: 85%"
          />
          <!-- <view class="scan-logo"></view> -->
        </view>
        <view class="exchange-right-now" @click="useRedeemCodeFn"
          >立即兑换</view
        >
        <view class="exchange-records" @click="jumpToExchangeRecords">
          <view class="left-logo"></view>
          <view class="right-text">我的兑换记录</view>
        </view>
        <hr
          style="
            border-top: 4rpx dashed #cfcfcf;
            margin-top: 77rpx;
            height: 1px;
          "
        />
        <view class="use-introduction">使用说明</view>
        <view class="introduction-context">
          尊敬的平台用户，请您在兑换服务前务必谨慎阅读以下条款：<br />
          《付费兑换激活服务不适用于七天无理由退货》请您知悉，平台上提供的兑换激活服务是内容服务商品，一经购买，无法转让。一经激活，无法退款。
        </view>
        <ExchangeResult
          v-if="showResult"
          :result="result"
          :resultContent="resultContent"
        ></ExchangeResult>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import ExchangeResult from "./components/ExchangeResult.vue";
import { useRedeemCode } from "@/api/modules/career";
export default {
  components: { ExchangeResult },
  data() {
    return {
      resultContent: "",
      uNavColor: "#79e3f4",
      activationCode: "", // 激活码
      showResult: false, // 控制兑换结果的显示隐藏
      result: "fail", // 传入子组件控制显示成功or失败logo
    };
  },
  onShow() {},
  mounted() {},
  methods: {
    async useRedeemCodeFn() {
      const params = {
        cardType: uni.getStorageSync("cardType"),
        personId: uni.getStorageSync("person-id").slice(2) || "123456",
        redeemCode: this.activationCode,
      };
      const res = await useRedeemCode(params);
      if (res.code == 200) {
        if (res.data == "1") {
          this.showResult = true;
          setTimeout(() => {
            this.showResult = false;
          }, 3000);
          this.result = "success";
        }
      } else {
        setTimeout(() => {
          this.showResult = false;
        }, 3000);
        this.result = "fail";
        this.resultContent = res.status_desc;
        this.showResult = true;
      }
    },
    jumpToExchangeRecords() {
      uni.navigateTo({
        url: `/pagesSub/userCenter/careerPathV2/exchangeRecords/index`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

$img-base-person: $img-base + "careerPath/";

.activation-code {
  width: 100%;
  height: 90vh;
  background-image: url($img-base + "careerPath/redemptionActivationCodeBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0rpx 18rpx;

  .exchange-card {
    width: 100%;
    height: 86%;
    margin-top: 208rpx;
    background-color: #ffffff;
    /* margin: 0 auto; */
    box-shadow: 0rpx 4rpx 16rpx 6rpx rgba(222, 224, 237, 0.5);
    padding: 56rpx 20rpx;
    border-radius: 16rpx;

    .title {
      font-size: 36rpx;
      color: #222222;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: D-DIN-PRO-700-Bold;
      font-weight: 700;
    }

    .code-input {
      width: 100%;
      height: 110rpx;
      background: #f3f5f8;
      border-radius: 24rpx;
      border: 2rpx solid #d7d7d7;
      margin-top: 72rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 32rpx;

      .scan-logo {
        width: 49rpx;
        height: 49rpx;
        background-image: url($img-base + "careerPath/scanIcon.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .exchange-right-now {
      height: 110rpx;
      background: #ff711e;
      border-radius: 24rpx;
      font-size: 36rpx;
      color: #ffffff;
      font-family: D-DIN-PRO-700-Bold;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 32rpx;
    }

    .exchange-records {
      margin-top: 46rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .left-logo {
        width: 40rpx;
        height: 40rpx;
        /* background-color: black; */
        background-image: url($img-base + "careerPath/recordIcon.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .right-text {
        margin-left: 16rpx;
      }
    }

    .dashedline {
      bordertop: 1px dashed #000;
    }
  }

  .exchange-card::before {
    content: "";
    position: absolute;
    top: 47%;
    left: 0;
    width: 48rpx;
    /* 半圆宽度 */
    height: 48rpx;
    /* 与容器高度相同 */
    background-color: #f4f6f8;
    /* 半圆形颜色 */
    border-top-right-radius: 50%;
    /* 右上角为圆形 */
    border-bottom-right-radius: 50%;
    /* 右下角为圆形 */
  }

  .exchange-card::after {
    content: "";
    position: absolute;
    top: 47%;
    right: 0;
    width: 48rpx;
    /* 半圆宽度 */
    height: 48rpx;
    /* 与容器高度相同 */
    background-color: #f4f6f8;
    /* 半圆形颜色 */
    border-top-left-radius: 50%;
    /* 左上角为圆形 */
    border-bottom-left-radius: 50%;
    /* 左下角为圆形 */
  }

  .use-introduction {
    font-size: 32rpx;
    color: #333333;
    font-family: D-DIN-PRO-700-Bold;
    font-weight: 700;
    margin-top: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .introduction-context {
    font-size: 28rpx;
    color: #888888;
    /* font-family: D-DIN-PRO-700-Bold; */
    margin-top: 28rpx;
    line-height: 48rpx;
  }
}
</style>
